<template>
    <section id="article-detail-page">
       <section class="top">
          <p class="title">{{articleDetail.Title}}</p>
       </section>
       <section class="center">
         <w-row>
           <w-cell class="date">{{articleDetail.CreatedTime | changeDateFormat}}</w-cell>
           <w-cell class="read-msg">
            <w-row>
                <w-cell><span class="look">{{articleDetail.WatchCount || 0}}</span></w-cell>
                <w-cell><span v-model="LikeCount" class="like" @click="changStar(articleDetail.ID,2)">{{LikeCount || 0}}</span></w-cell>
                <w-cell><span v-model="StarCount"  class="star" @click="changStar(articleDetail.ID,3)">{{StarCount || 0}}</span></w-cell>
            </w-row>
           </w-cell>
         </w-row>
       </section>
       <section class="bottom">
          <img src="../../assets/img/zx/detail.jpg"/>
          <p v-html="articleDetail.Content"></p>
       </section>
    </section>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import { formatDate } from '../../util/datefomat';
export default {
    data() {
        return {
            iconWidth: 20,
            iconTitleWidth: 30,
            iconAlign: 'center',
            StarCount: 0,
            LikeCount: 0
        }
    },
    filters: {  
      changeDateFormat: function (val) {  
          if (val != null) {
            var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10));
            //月份为0-11，所以+1，月份小于10时补个0
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
          }
            return "";
      }
    }, 
    computed: {
        ...mapGetters({
            articleDetail: 'articleDetail'
        })
    },
    mounted() {
        this.setLoading(true);
        this.getArticleDetail(this.$router.history.current.params.aid).then((res) => {
            this.setLoading(false);
            this.changStar(res.ID,1);
            this.LikeCount = res.LikeCount;
            this.StarCount = res.StarCount;
       
        //每日阅读资讯获得积分 +2
        let expar = {
            openID: localStorage.openID,
            EID: res.ID,
            Type: 1
        }
        this.addExLog(expar).then((res) => {
            localStorage.removeItem("userMsg");
            var _user = JSON.stringify(res.userInfo)
            localStorage.setItem('userMsg',_user);
        });
      });
    },
    methods: {
        ...mapActions([
            'getArticleDetail',
            'updateArticleStar',
            'setLoading',
            'addExLog'
        ]),
        filters: function(date) {
        },
        changStar: function(id,type) {
            let me = this;
            this.updateArticleStar({"id": id,"type": type}).then(function(){
                if(type == 3) {
                   me.StarCount++;
                   window.Wui.Toast.show('点赞成功','middle');
                } else if(type == 2) {
                   me.LikeCount++;
                   window.Wui.Toast.show('喜欢成功','middle');
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
   #article-detail-page {
         font-size: 0.5rem !important;
         width: 95%;
         margin: 0 auto;
         padding-bottom: 2rem;
         p {
             line-height: 1.2rem;
         }
         .top {
            border-bottom: 1px solid #dfdfdf;
            .title {
                font-size: 0.8rem;
                margin: 0.4rem 0;
                text-align:center;
            }
         }
         .center {
             margin-top: 0.4rem;
            .date,.read-msg {
                color: #d4d4d4;
            }
            .read-msg {
                display: inline-block;
                text-align: right;
            }
            .read-msg span {
               margin-left: 6px;
               text-align: right;
               display: inline-block;
               background-size: 35% auto;
               width: 1.5rem;
               height: 1rem;
               text-align: left;
               padding-left: 0.9rem;
               line-height: 1rem;
           }
           .look {
                  background: url('../../assets/img/zx/look.png') 0 center no-repeat;
           }
           .star {
                  width: 1.2rem !important;
                  height: 0.9rem !important;
                  background: url('../../assets/img/zx/star.png') 0 center no-repeat;
           }
           .like {
                  background: url('../../assets/img/zx/like.png') 0 center no-repeat;
           }
         }
         .bottom {
             margin-top: 1rem;
             p { 
                 text-indent: 2em;
             }
             img {
                 width: 17.3rem;
             }
         }
   }
</style>